Recharts — Radar and Radial Bar Charts

We can add charts easily to a React app with Recharts.

In this article, we’ll look at how to use it.

Radar Chart

We can add a radar chart with the Radar and RadarChart components.

For example, we can write:

import React from "react";
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis
} from "recharts";

const data = [
  {
    subject: "Math",
    A: 120,
    B: 110,
    fullMark: 150
  },
  {
    subject: "Science",
    A: 98,
    B: 130,
    fullMark: 150
  },
  {
    subject: "English",
    A: 86,
    B: 130,
    fullMark: 150
  }
];
export default function App() {
  return (
    <div className="App">
      <RadarChart
        cx={300}
        cy={250}
        outerRadius={150}
        width={500}
        height={500}
        data={data}
      >
        <PolarGrid />
        <PolarAngleAxis dataKey="subject" />
        <PolarRadiusAxis />
        <Radar
          name="Mike"
          dataKey="A"
          stroke="#8884d8"
          fill="#8884d8"
          fillOpacity={0.6}
        />
      </RadarChart>
    </div>
  );
}

We add the RadarChart component to wrap around the points.

outerRadius has the radius of the radar chart.

width and height has the dimensions.

PolarGrid adds the grid lines.

PolarAngleAxis sets the axis.

The dataKey prop is set to the property name of the key.

PolarRadiusAxis has the axes with the numbers.

Radar has the radar chart values.

dataKey has the property name with the values for the radar chart.

fill has the fill color.

stroke has the stroke color for the radar chart.

fillOpacity sets the opacity for the fill of the shape connected by the dots.

Radial Bar Chart

Recharts lets us add radial bar charts.

For example, we can write:

import React from "react";
import { RadialBarChart, RadialBar, Legend } from "recharts";

const data = [
  {
    name: "18-24",
    uv: 31,
    pv: 2400,
    fill: "#8884d8"
  },
  {
    name: "25-29",
    uv: 26,
    pv: 4567,
    fill: "#83a6ed"
  },
  {
    name: "30-34",
    uv: 17,
    pv: 1398,
    fill: "#8dd1e1"
  }
];

const style = {
  top: 0,
  left: 350,
  lineHeight: "24px"
};

export default function App() {
  return (
    <div className="App">
      <RadialBarChart
        width={500}
        height={300}
        cx={150}
        cy={150}
        innerRadius={20}
        outerRadius={140}
        barSize={10}
        data={data}
      >
        <RadialBar
          minAngle={15}
          label={{ position: "insideStart", fill: "#fff" }}
          background
          clockWise
          dataKey="uv"
        />
        <Legend
          iconSize={10}
          width={120}
          height={140}
          layout="vertical"
          verticalAlign="middle"
          wrapperStyle={style}
        />
      </RadialBarChart>
    </div>
  );
}

The RadialBarChart has the bars.

width and height has the dimensions of the radial bar chart.

innerRadius and outerRadius defines the radii for the innermost and outermost rings.

data has the data we want to display.

RadialBar has the radial bars to display.

clockwise makes it animate clockwise.

dataKey has the property name with the value for the bars.

background makes a background color display.

Legend has the legend for the bars.

layout sets the layout for the legend.

verticalAlign sets the vertical alignment.

wrapperStyle has the style for the legend’s wrapper element.

iconSize sets the size of the icons.

width and height sets the dimensions of the legend.

Conclusion

We can add radar and radial bar charts with Recharts.